I am trying to create a slideshow but the addEventListener is not working !!
i am beginner in js world and want to get better by projects but this simple project has stumped me.
const nextBtn = document.querySelector(".next-btn");
const prevBtn = document.querySelector(".prev-btn");
const slides = document.querySelectorAll(".slide");
const slider = document.querySelector(".slider");
const slideIcons = document.querySelectorAll(".slide-icon");
// selecting total number of slides
const numberOfSlides = slides.length;
// whatever
const slideNumber = 0;
// manual functionality
// next-btn
nextBtn.addEventListener("click" ,() => {
slides.forEach(slide =>{
slide.classList.remove("actve");
});
slideIcons.forEach((slideIcon) => {
slideIcon.classList.remove("active");
});
})
I don't got the whole situation but as I see your need to add event Listener to your slider so am gonna give you ex about range slider event handler
// this stores the value at startup (which is why you're always getting 1)
var rangeInput = document.getElementById("rangeinput").value;
You should be reading the value in the handler instead:
function testtest(e) {
// read the value from the slider:
var value = document.getElementById("rangeinput").value;
// now compare:
if (value > 0 && value < 5) {
alert("First");
} else {
alert("Second");
}
}
now Updating rangevalue
It also looks like you want to update the output element with the value of the range. What you're currently doing is referring to the element by id:
onchange="rangevalue.value=value"
However, as far as I know, this isn't standard behavior; you can't refer to elements by their id alone; you have to retrieve the element and then set the value via the DOM.
Might I suggest that you add a change listener via javascript:
rangeInput.addEventListener("change", function() {
document.getElementById("rangevalue").textContent = rangeInput.value;
}, false);
Of course, you'll have to update the code to use addEventListener or attachEvent depending on the browsers that you want to support; this is where JQuery really becomes helpful.
Use the mouseup event for that. var rangeInput = document.getElementById("rangeinput");
rangeInput.addEventListener('mouseup', function() {
if (this.value > 0 && this.value < 5) {
alert("First");
} else{
alert("Second");
}
});
You can also use the FORMs oninput method:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" />100 +
<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>
This has an advantage over onclick/onmouseup because it handles the case where the slider is moved using the keyboard (tab to the input and use the arrow keys)
Try giving your html elements an id and then use getElementById instead of querySelector